import React from 'react';
import { DatePicker } from 'antd';
import type { RangePickerProps, DatePickerProps } from 'antd/es/date-picker';
import { Dayjs } from 'dayjs';

const { RangePicker } = DatePicker;

export interface CustomRangePickerProps extends Omit<RangePickerProps, 'value' | 'onChange'> {
  value?: [Dayjs, Dayjs];
  onChange?: (value: [Dayjs, Dayjs] | null) => void;
  format?: string;
}

export const CustomRangePicker: React.FC<CustomRangePickerProps> = ({
  value,
  onChange,
  format = 'YYYY-MM-DD',
  ...restProps
}) => {
  const handleChange = (dates: [Dayjs | null, Dayjs | null] | null) => {
    if (!onChange) return;
    if (dates && dates[0] && dates[1]) {
      onChange([dates[0], dates[1]]);
    } else {
      onChange(null);
    }
  };

  return (
    <RangePicker
      value={value}
      onChange={handleChange}
      format={format}
      allowClear
      style={{ width: '100%' }}
      {...restProps}
    />
  );
};

export interface CustomDatePickerProps extends Omit<DatePickerProps<Dayjs>, 'value' | 'onChange'> {
  value?: Dayjs;
  onChange?: (value: Dayjs | null) => void;
  format?: string;
}

export const CustomDatePicker: React.FC<CustomDatePickerProps> = ({
  value,
  onChange,
  format = 'YYYY-MM-DD',
  ...restProps
}) => {
  return <DatePicker value={value} onChange={onChange} format={format} {...restProps} />;
};
